<!--  线 + 柱混合图 -->
<template>
  <div :id="id" ref="chart" :class="className" :style="{ height, width }"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "index",
  props: ["id", "className", "height", "width", "commonData", "barXdata", "barYdata"],
  data() {
    return {
      options: {
        grid: {
          left: "5%",
          right: "%",
          bottom: "8%",
          top:"10%",
          containLabel: true
        },
        dataZoom: [

          {
            show: true,
            height: 10,
            bottom: "0%",
            right: "2%",
            left: "6%",
            showDetail: false,
            brushSelect: false,
            backgroundColor: "rgba(52, 55, 61, 1)",
            showDataShadow: false,
            borderColor: "rgba(52, 55, 61, 1)",
            fillerColor: "rgba(198, 198, 198, 1)",
            start: 0,
            end: 50,
            handleSize: "0%",
            zoomLock: true,
            handleStyle: {
              // 两侧缩放手柄的样式配置。
              borderColor: "#4194A8",
              borderWidth: "10",
              shadowBlur: 1,
              background: "rgba(52, 55, 61, 1)"
            }
          },
          // 添加鼠标滚轮控制左右滑动
          {
            type: "inside",
            zoomOnMouseWheel: false, // 滚轮是否触发缩放
            moveOnMouseMove: true, // 鼠标滚轮触发滚动
            moveOnMouseWheel: true
          }
        ],
        tooltip: {
          trigger: "axis",
          show: true,
          boxShadow: "box-shadow: 0 0 0.1rem rgba(0,120,234,0.8)",
          textStyle: {
            color: "#fff",
            fontSize: "14px"
          },
          className: "custom-tooltip-box",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "rgba(0,120,234,0.1)",
              width: "1"
            },
            show: false
          },
          formatter: function(params) {
            const area = (params[0].data.coverageArea).toFixed(2);
            const rate = (params[0].data.coverageRate).toFixed(2);
            const satelliteCode = params[0].data.satelliteCode;
            const stripsNum = params[0].data.strips;
            return `<div  class="tootipCon">${satelliteCode} <br/>coverageArea ${area}<br/>coverageRate ${rate}%<br/>strips ${stripsNum}</div>`;
          }
        },
        xAxis: [
          {
            type: "category",
            data: this.barXdata,
            axisLabel: {//X轴文字
              show: true,//是否显示x轴
              interval: 0, //显示x轴所有内容 间距
              fontSize: 12,
              formatter: function(params) {
                var str = "";                 // 最终拼接成的字符串
                var paramsLen = params.length;// 获取每项文字的个数
                var len = 6;                  // 每行能显示的字的个数（根据实际情况自己设置）
                var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                if (paramsLen > len) {        //大于设定的len就换行，不大于就不变化
                  for (var i = 0; i < rowNumber; i++) {
                    var temp = "";            // 表示每一次截取的字符串
                    var start = i * len;      // 开始截取的位置
                    var end = start + len;    // 结束截取的位置
                    if (i == rowNumber - 1) { // 最后一次不换行
                      temp = params.substring(start, paramsLen);
                    } else {                  // 每一次拼接字符串并换行
                      temp = params.substring(start, end) + "\n";
                    }
                    str += temp;              // 最终拼成的字符串
                  }
                } else {                      // 给新的字符串赋值
                  str = params;
                }
                return str;                   //返回字符串
              },
              // rotate:15,
              textStyle: {
                color: "#fff" //X轴文字颜色
              }
            },
            show: true
          }
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 100,
            splitNumber: 5,
            interval: 25,
            show: true, // 显示y轴
            axisLabel: {
              show: true,//是否显示Y轴
              fontSize: 12,
              color: "#fff",
              formatter(params) {
                return `${params}%`;
              }
            },


            splitLine: {
              // 网格线
              show: true,
              lineStyle: { //分割线
                type: "dashed",
                color: "#474D55"
              }
            },
            axisLine: {
              show: false

            }
          }
        ],
        series: [
          {
            name: "Coverage",
            type: "bar",
            data: this.barYdata,
            barWidth: 20,
            label: {
              normal: {
                show: true,
                position: "top",
                fontSize: 12,
                color: "#fff",
                formatter(params) {
                  const rate = (params.data.coverageRate).toFixed(2);
                  return `${rate}%`;
                }
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#86CDFF" },
                { offset: 0.5, color: "#4E9EFF" },
                { offset: 1, color: "#4E9EFF" }
              ])
            }
          }

        ]
      }
    };
  },
  mounted() {
    const myChart = echarts.init(document.getElementById(this.id));
    myChart.setOption(this.options);
    window.addEventListener("resize", () => {
      myChart.resize();
    });


  }

};
</script>
<style scoped lang="scss">

.custom-tooltip-box {
  padding: 10px !important;
  box-sizing: border-box;
  color: red;
  border: none !important;

  .tootipCon {
    font-size: 14px;
    color: red;
    background: url("~@/assets/imgs/tooltp.png") no-repeat;
    width: 142px;
    height: 107px;
    padding: 10px;
    background-size: cover;
  }
}

</style>
